import React from 'react';
import {observer} from 'mobx-react';
import {Badge, Button, message, Modal, Radio} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import {Action, TableCard} from '@/components';
import {http} from 'libs';
import store from './store';


export default observer(function () {
  const columns = [{
    title: 'No.',
    key: 'series',
    width: 50,
    render: (_, __, index) => <span className="idx">{index + 1}</span>
  }, {
    title: '登录名',
    dataIndex: 'username',
  }, {
    title: '姓名',
    dataIndex: 'nickname',
  }, {
    title: '状态',
    render: text => text['is_active'] ? <Badge status="success" text="正常"/> : <Badge status="default" text="禁用"/>
  }, {
    title: '注册时间',
    dataIndex: 'created_at',
    hide: true
  }, {
    title: '最近登录',
    dataIndex: 'last_login'
    }, {
      title: '操作',
      width: 240,
      render: info => (
        <Action>
          <Action.Button onClick={() => handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</Action.Button>
          <Action.Button onClick={() => store.showForm(info)}>编辑</Action.Button>
          <Action.Button onClick={() => store.showPwdForm(info)}>重置密码</Action.Button>
          <Action.Button danger onClick={() => handleDelete(info)}>删除</Action.Button>
        </Action>
      )
  }]

  function handleActive(info) {
    Modal.confirm({
      title: '操作确认',
      content: `确定要${info['is_active'] ? '禁用' : '启用'}【${info['nickname']}】?`,
      onOk: () => {
        return http.patch(`/api/user/`, {id: info.id, is_active: !info['is_active']})
          .then(() => {
            message.success('操作成功');
            store.fetchRecords()
          })
      }
    })
  }

  function handleDelete(info) {
    Modal.confirm({
      title: '删除确认',
      content: `确定要删除【${info['nickname']}】?`,
      onOk: () => {
        return http.delete('/api/user/', {params: {id: info.id}})
          .then(() => {
            message.success('删除成功');
            store.fetchRecords()
          })
      }
    })
  }

  return (
    <TableCard
      title="员工列表"
      rowKey="id"
      bordered
      loading={store.fetching}
      dataSource={store.dataSource}
      columns={columns}
      pagination={{
        showSizeChanger: true,
        showLessItems: true,
        hideOnSinglePage: true,
        pageSizeOptions: ['10', '20', '50', '100']
      }}
      onReload={store.fetchRecords}
      // onRow={(record) => ({
      //   onClick: () => {
      //     store.record = record;
      //   },
      // })}
      // rowSelection={{
      //   selectedRowKeys: [store.record.id],
      // }}
      actions={[
        <Radio.Group value={store.f_status} onChange={store.eSet('f_status')}>
          <Radio.Button value="">全部</Radio.Button>
          <Radio.Button value="1">正常</Radio.Button>
          <Radio.Button value="0">禁用</Radio.Button>
        </Radio.Group>,
        <Button type="primary" icon={<PlusOutlined/>} onClick={() => store.showForm()}>新建员工</Button>,
      ]}/>
  )
})
